<template>
  <ContentWrap>
    <el-descriptions
      :title="t('reviewJudgeScene.card.title')"
      :column="6"
      direction="vertical"
      border
    >
      <el-descriptions-item :label="t('reviewJudgeScene.card.awardsName')">
        {{ awardsInfo.awardsName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('reviewJudgeScene.card.awards')">
        {{ awardsInfo.templateName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('reviewJudgeScene.card.stage')">
        {{ getJudgeStatus }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('reviewJudgeScene.card.round')">
        {{ currentRound?.name }}
      </el-descriptions-item>
      <!-- 剩余名额 -->
      <el-descriptions-item
        v-if="currentStage && currentRoundRemainList.length"
        :label="t('reviewJudgeScene.card.remaining')"
      >
        <div class="flex flex-wrap gap-5px">
          <el-tag
            v-for="item in currentRoundRemainList"
            :key="item.key"
            type="primary"
            size="small"
          >
            {{ item.name }}: {{ item.quota }}/{{ item.amount }}
          </el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="t('reviewJudgeScene.card.rules')">
        <el-button
          v-if="awardsInfo.instanceRules?.length"
          link
          type="primary"
          @click="emits('openRule')"
        >
          {{ t('common.view') }}
        </el-button>
      </el-descriptions-item>
      <template #extra>
        <el-button v-if="isShowResultConfirm" type="success" @click="emits('openConfirm')">
          {{ t('reviewJudgeScene.resultConfirm.button') }}
        </el-button>
      </template>
    </el-descriptions>
  </ContentWrap>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useInstanceReviewSceneStore } from '@/store/modules/instance/instanceReivewScene'

defineOptions({ name: 'ReviewJudgeCommonHeader' })
const emits = defineEmits(['openRule', 'openConfirm'])

const { t } = useI18n() // 国际化

const instanceReviewSceneStore = useInstanceReviewSceneStore()
const { awardsInfo, currentStage, currentRound, currentRoundRemainList } =
  storeToRefs(instanceReviewSceneStore)

// 评审状态
const getJudgeStatus = computed(() => {
  // 1=未开始 2=初评进行中 3=初评结束 4=终评进行中 5=终评结束
  switch (awardsInfo.value.judgeStatus) {
    case 1:
      return t('reviewJudgeScene.card.notStart')
    case 2:
      return t('reviewJudgeScene.card.initialUnderway')
    case 3:
      return t('reviewJudgeScene.card.initialEnd')
    case 4:
      return t('reviewJudgeScene.card.finalUnderway')
    case 5:
      return t('reviewJudgeScene.card.finalEnd')
    default:
      return t('reviewJudgeScene.card.notStart')
  }
})

// 是否显示推荐名单确认按钮
const isShowResultConfirm = computed(
  () => awardsInfo.value.judgeStatus === 5 && currentRound.value?.isJudgesConfirm
)

onMounted(() => {
  // 查询剩余名额
  instanceReviewSceneStore.getStageRoundRemaining().then()
})
</script>

<style scoped lang="scss"></style>
